<template>
  <view>
    <!-- 授权会员 -->
    <view v-if="false" style="display:flex;justify-content:center">
      <view class="phoneAuthorize">
        <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权手机号</button>
      </view>
      <view class="phoneAnother" @click="fillPhone">填写其他手机号</view>
      <u-popup :show="memShow" mode="bottom" @close="onClose">
        <view class="pop" v-if="nextFlag">
          <view class="pop__top">您正在开通XXX会员</view>
          <view class="pop__conter">
            <view class="pop__conter--text">您还需要完善以下信息</view>
            <view class="pop__conter--phone">
              <view class="pop__conter--phone--text">
                手机*
                <input placeholder="请输入手机号码" style="margin-left:70rpx">
              </view>
              <view class="pop__conter--phone--code">获取验证码</view>
            </view>
            <view class="pop__conter--phone">
              <view class="pop__conter--phone--text">
                验证码*
                <input placeholder="请输入验证码" style="margin-left:40rpx">
              </view>
            </view>
          </view>
          <view style="display:flex;justify-content:center">
            <view class="pop__next" @click="nextInput">下一步</view>
          </view>
        </view>
        <view class="pop" v-else>
          <view class="pop__top">手机 15958075097</view>
          <view class="pop__conter">
            <view class="pop__conter--text">您还需要完善以下信息</view>
            <view class="pop__conter--phone">
              <view class="pop__conter--phone--text">
                姓名*
                <input placeholder="请输入姓名" style="margin-left:70rpx">
              </view>
            </view>
            <view class="pop__conter--phone">
              <view class="pop__conter--phone--text">
                身份证号码*
                <input placeholder="请输入18位身份证号码" style="margin-left:40rpx">
              </view>
            </view>
          </view>
          <view style="display:flex;justify-content:center">
            <view class="pop__next">领取会员卡</view>
          </view>
        </view>
      </u-popup>
    </view>
    <!-- 授权后购买会员 -->
    <view class="topUser ">
      <view class="topUser__left">
        <image :src="avatarUrl || 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640'"
          style="width:80rpx;height:80rpx;border-radius:100%"></image>
        <view class="topUser__left--phone">{{nikeName}}</view>
      </view>
      <view @click="showDesc" class="topUser__right">
        会员说明
        <u-icon name="question-circle"></u-icon>
      </view>
    </view>
    <u-popup :show="memDescFlag" @close="onClose" :customStyle="{backgroundColor:'transparent',top:'40%'}">
      <view class="descConter">
        <view class="descConter__top">会员说明</view>
        <u-icon name="close-circle" color="#CCCBC9" size="40rpx" class="descConter__top--icon" @click="onClose"></u-icon>
        <view class="descConter__conter">
          <view class="descConter__conter__title">
            <text>1</text>
            会员介绍
          </view>
          <view class="descConter__conter_con">
            客户可以选择相应的会员等级进行购买，以此来开通会员，享受不同的会员权益，在某一等级使用期间，可通过付费或积分兑换进行升级，开通时长不会累计。
          </view>
        </view>
        <view class="descConter__conter">
          <view class="descConter__conter__title">
            <text>2</text>
            会员有效期
          </view>
          <view class="descConter__conter_con">支付成功后即日起开始计算，12个月有效期为365天，到期后将自动取消会员享有的所有权益。</view>
        </view>
        <view class="descConter__conter">
          <view class="descConter__conter__title">
            <text>3</text>
            关于退款
          </view>
          <view class="descConter__conter_con">购买此卡后不可做任何退款申请。</view>
        </view>
      </view>
    </u-popup>
    <view class="imageContainer_Wrap">
      <swiper class="imageContainer" @change="handleChange" previous-margin="50rpx" next-margin="50rpx" circular
        indicator-dots="true" indicator-color="#a39f99" indicator-active-color="#f49641">
        <block v-for="(item, index) in memberCards" :key="index">
          <swiper-item class="imageContainer__swiperItem ">
            <view
              :class="['imageContainer__swiperItem__content',currentIndex == index && 'imageContainer__swiperItem__content__active']">
              <view style="font-size:36rpx;margin-bottom:8rpx;">{{title}}</view>
              <view
                style="font-size:24rpx;display:inline-block;color:#666;border-radius:32rpx;padding:4rpx 16rpx;background:#fff;">
                {{item.rankName}}LV{{item.rankCode}}
              </view>
              <view v-if="openType == 2" class="imageContainer__swiperItem__paymount">
                {{item.integralCount}}积分／{{useInDate}}天
              </view>
              <view v-if="openType == 1" class="imageContainer__swiperItem__paymount">
                ¥{{item.payAmount}}／{{useInDate}}天
              </view>
              <view v-if="openType == 4" class="imageContainer__swiperItem__paymount">
                购买指定商品自动发放
              </view>
              <view v-if="openType == 3" class="imageContainer__swiperItem__paymount">
                消费满{{item.consumeCount}}元自动发放
              </view>
            </view>
            <image
              :class="['imageContainer__swiperItem__itemImg',currentIndex == index ? 'imageContainer__swiperItem__itemImg--active': '']"
              :src="item.backGroundPicUrl || defaultImg"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="privilege">
      <view style="display:flex;font-size:26rpx;">
        <view class="privilege__sign"></view>
        会员特权
      </view>
      <view class="privilege__conter">
        <view v-for="(item, index) in privilegeList" :key="index" class="privilege__conter--list ">
          <view @click="onPrivilegeTap" :data-index="index" class="privilege__conter--list--item">
            <image :src="item.icon || ptypeMapIcon[item.ptype]"
              :class="['privilege-img',privilegeIndex===index?'-active':'']"></image>
          </view>
          <view @click="onPrivilegeTap" :data-index="index" style="width:100%;text-align:center;">{{item.privilegeName}}
          </view>
        </view>
      </view>
      <view class="privilege__desc">
        <view style="font-weight:bold">{{privilege.privilegeName}}</view>
        <view v-if="privilege.ptype == 1" style="margin-top:20rpx">
          {{privilege.illustrate ? privilege.illustrate+(privilege.value ? '(折扣'+privilege.value/10+'折)' : '') : '暂无特殊优待'}}
        </view>
        <view v-if="privilege.ptype == 3" style="margin-top:20rpx">
          {{privilege.illustrate ? (privilege.value ? privilege.illustrate+'(加'+privilege.value+'倍)' : '') : '暂无特殊优待'}}
        </view>
        <view v-if="privilege.ptype != 3 && privilege.ptype != 1" style="margin-top:20rpx">
          {{privilege.illustrate || '暂无特殊优待'}}
        </view>
      </view>
    </view>
    <view v-if="openType == 1 || openType == 2" class="opening" @click="openMem">立即开通</view>
    <view v-if="openType == 4" class="good__member">
      <view style="height:80rpx;line-height:80rpx;text-align:center;font-size:30rpx;color:#fff;"
        class="good__member__btn">
        <view
          style="color:#fff;height:80rpx;border-radius:50rpx;display:inline-block;background:rgba(230,183,98,1);padding:0rpx 40rpx;">
          购买下方商品自动发放会员卡
        </view>
      </view>
      <view style="margin:30rpx 0;text-align:center;font-size:30rpx;color:#666;">
        <text>购买任一商品即可获得会员卡</text>
      </view>
      <view class="good-list">
        <block v-for="(item, index) in goodsList" :key="index">
          <view class="good-list-item" :data-id="item.id" @click="goodClick">
            <image style="height: 380rpx;" :src="item.pic"></image>
            <view class="good-list-item-name">{{item.name}}</view>
            <view style="color:red;" class="good-list-item-price">¥{{item.maxPrice}}</view>
          </view>
        </block>
      </view>
    </view>
    <u-popup :show="payTypeFlag" @close="onClose" mode="bottom" round="10"> 
      <view class="payConter" @click="hideMemberDrop">
        <view class="payConter__top ">
          <u-icon name="arrow-left" style="margin-right:40rpx" @click="onClose"></u-icon>
          开通会员
        </view>
        <view class="payConter__openingMode">
          <view>会员等级</view>
          <view style="position:relative;display:flex" @click.stop="onShowMember">
            {{selectOption.rankName}}
            <u-icon name="arrow-down" style="margin-left:10rpx"></u-icon>
            <view class="custom__drop--down" v-if="showMemberDrop">
              <view v-for="(item, index) in memberLevel.options" :key="index"
                :class="['member-item',item.id == memberLevel.id && 'member-item-active']" @click.stop="onMemberSelect"
                :data-id="item.id">
                {{item.rankName}}
              </view>
            </view>
          </view>
        </view>
        <view v-if="openType == 1" class="payConter__openingMode">
          <view>价格</view>
          <view>¥{{selectOption.payAmount}}</view>
        </view>
        <view v-if="openType == 2" class="payConter__openingMode">
          <view>积分</view>
          <view>{{selectOption.integralCount}}</view>
        </view>
        <view class="payConter__openingMode">
          <view>有效期</view>
          <view>{{useInDate}}天</view>
        </view>
        <view v-if="openType == 1" class="payConter__openingMode">
          <view>支付方式</view>
          <view style="position:relative;display:flex" @click.stop="onShowPayType">
            {{payType.text}}
            <u-icon name="arrow-down" style="margin-left:10rpx"></u-icon>
            <view class="custom__drop--down" v-if="showPayType">
              <view v-for="(item, index) in payType.options" :key="index"
                :class="'member-item ' + (item.type == payType.type && 'member-item-active')"
                @click.stop="onPayTypeSelect" :data-type="item.type">
                {{item.text}}
              </view>
            </view>
          </view>
        </view>
        <view v-if="openType == 2" style="display:flex;justify-content:center">
          <text class="can__use">当前可用积分{{useAmount}}</text>
          <view :class="['payConter__btn',selectOption.integralCount>useAmount&&'payConter__btn-no']" @click="paySure">
            {{selectOption.integralCount>useAmount ? '积分不足':'确认兑换'}}
          </view>
        </view>
        <view v-if="openType == 1" style="display:flex;justify-content:center">
          <text v-if="payType.type == 2" class="can__use">当前可用余额¥{{useAmount}}</text>
          <view :class="['payConter__btn',selectOption.payAmount>useAmount&&payType.type==2&&'payConter__btn-no']"
            @click="paySure">
            {{selectOption.payAmount>useAmount&&payType.type==2 ? '余额不足':'确认支付'}}
          </view>
        </view>
      </view>
    </u-popup>
    <view class="popup-wrap">
      <u-popup :show="userInfoShow" mode="bottom" @close="onClose">
        <view class="pop" v-if="nextFlag">
          <view>
            <view class="payConter__top">
              <u-icon name="arrow-left" style="margin-right:40rpx" @click="onClose"></u-icon>
              填写信息
            </view>
            <view class="pop__conter">
              <view class="pop__conter--phone">
                <view class="pop__conter--phone--text">
                  <view class="pop__conter--phone-label">
                    手机号
                    <text>{{phoneForm.isRequired ? '*' : ''}}</text>
                  </view>
                  <input :placeholder="phoneForm.tips" style="margin-left:40rpx" :value="userRegisterForm.phone"
                    @blur="onPhoneBlur" @input="onPhoneChange">
                </view>
                <view @click="onSendCode"
                  :class="['pop__conter--phone--code',formCode.disabled && 'phone__code--none']">
                  {{formCode.buttonName}}
                </view>
              </view>
              <view class="pop__conter--phone">
                <view class="pop__conter--phone--text">
                  <view class="pop__conter--phone-label">
                    验证码
                    <text>*</text>
                  </view>
                  <input :value="userRegisterForm.code" @input="onCodeChange" placeholder="请输入验证码"
                    style="margin-left:40rpx">
                </view>
              </view>
              <view v-for="(item, index) in memberRegisterFormVos" :key="index" class="pop__conter--phone">
                <view class="pop__conter--phone--text">
                  <view class="pop__conter--phone-label">
                    {{item.formName}}
                    <text>{{item.isRequired ? '*' : ''}}</text>
                  </view>
                  <input :placeholder="item.tips" style="margin-left:40rpx" :data-index="index"
                    :value="registerData[index]" @input="onRegisterChange">
                </view>
              </view>
            </view>
          </view>
          <view style="display:flex;justify-content:center">
            <view class="pop__next" @click="onPassMember">保存并开通会员</view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>
<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    getMemberCardInfo,
    confirmPayment,
    sendCode,
    updateRegisterData,
  } from "@/api/modules/member";
  import {
    ptypeMapIcon
  } from "@/utils/const";
  @Component
  export default class Member extends Vue {
    ptypeMapIcon: any = ptypeMapIcon;
    memShow: boolean = false // 会员授权弹窗
    defaultImg: string = "https://images.unsplash.com/photo-1551446591-142875a901a1?w=640"
    defaultIcon: string = "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640" // 默认会员图标
    nextFlag: boolean = true
    memberCards: Array < any >= []
    title: string = "" // 会员卡名称
    useInDate: number = 365 // 有效期
    imgList: Array < string >= [
      // 图片列表
      "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640",
      "https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640",
      "https://images.unsplash.com/photo-1551446591-142875a901a1?w=640",
    ]
    avatarUrl:string = ""
    currentIndex: number = 0 // 当前轮播图下标
    privilegeList: Array < any >= []
    privilege: any = {}
    privilegeIndex: number = 0
    goodsList: Array < any >= []
    memDescFlag: boolean = false // 会员说明弹窗
    payTypeFlag: boolean = false // 底部弹起购买方式
    openFlag: boolean = false // 成功购买弹窗
    openType: number = 0 // 开通方式
    useAmount: number = 0
    memberLevel: any = {
      options: [{
          id: 1,
          label: "普卡会员"
        },
        {
          id: 2,
          label: "金卡会员"
        },
        {
          id: 3,
          label: "钻石会员"
        },
      ],
      id: 1,
    }
    memberLabel: string = "普卡会员"
    showMemberDrop: boolean = false
    showPayType: boolean = false
    userInfoShow: boolean = false
    phoneForm: any = {}
    memberRegisterFormVos: Array < any >= [] // 注册表单
    payType: any = {
      options: [{
          type: 1,
          text: "微信支付"
        },
        {
          type: 2,
          text: "余额支付"
        },
      ],
      type: 1,
      text: "微信支付",
    }
    formCode: any = {
      buttonName: "获取验证码",
      isDisabled: false,
      time: 60,
    }
    userRegisterForm: any = {
      phone: null,
      code: null,
    }
    registerData: Array < any >= []
    selectOption: any = {}
    formMap = {
      1: "身份证",
      2: "文本",
      3: "电话",
    };
    tableMap = {
      1: "paymentVos",
      2: "integralVos",
      3: "consumeVos",
      4: "assignProductVos",
    };
    onLoad() {
      uni.showLoading({
        title: "加载中",
      });
      getMemberCardInfo(null)
        .then(data => {
          if (data) {
            let memberCards = (data[this.tableMap[data.openType]] || []).filter(
              v => v.isOpen + "" === "1",
            );
            const privilegeList = (
              memberCards[0].memberPrivilegeVos || []
            ).filter(v => v.isSelected + "" === "1");
            memberCards = memberCards.filter(v => v.rankName !== "");
            uni.hideLoading();
            this.setData({
              openType: data.openType,
              avatarUrl: data.avatarUrl,
              nikeName: data.nikeName,
              memberLevel: {
                options: memberCards,
                id: memberCards[0].id,
              },
              selectOption: memberCards[0],
              privilegeList,
              privilege: privilegeList[0] || {},
              privilegeIndex: 0,
              memberCards,
              title: data.title,
              useInDate: data.useInDate,
              phoneForm: data.memberRegisterFormVos[0],
              useAmount: data.useAmount,
              memberRegisterFormVos: data.memberRegisterFormVos.filter(
                v => v.formId + "" !== "1",
              ),
              goodsList: memberCards[0].memberCardGoodsVo &&
                memberCards[0].memberCardGoodsVo.discountProductVos,
            });
          }
        })
        .catch(() => {
          uni.hideLoading();
          uni.showToast({
            title: "获取会员信息失败",
            icon: "none",
            duration: 2000,
          });
        });
    }
    /**
     * 查看会员说明
     * @param e
     */
    showDesc() {
      this.setData({
        memDescFlag: true
      });
    }
    /**
     * 轮播图滑动
     */
    handleChange(e) {
      const memberCard: any = this.memberCards[e.detail.current];
      const privilegeList = (memberCard.memberPrivilegeVos || []).filter(
        v => v.isSelected + "" === "1",
      );
      this.setData({
        currentIndex: e.detail.current,
        privilegeList,
        privilege: privilegeList[0] || {},
        privilegeIndex: 0,
        goodsList: memberCard.memberCardGoodsVo &&
          memberCard.memberCardGoodsVo.discountProductVos,
      });
    }

    /**
     * 填写手机号码
     */
    fillPhone() {
      this.setData({
        memShow: true
      });
    }

    /**
     * 弹窗下一步操作
     */
    nextInput() {
      this.setData({
        nextFlag: false
      });
    }
    /**
     * 立即开通
     */
    openMem() {
      this.setData({
        payTypeFlag: true,
      });
    }

    /**
     * 确认付款
     */
    paySure() {
      const selectOption: any = this.selectOption;
      const {
        openType,
        payType,
        useAmount,
        useInDate
      } = this['_data'];
      if (openType === 2 && selectOption.integralCount > useAmount) {
        uni.showToast({
          title: "余额不足",
          icon: "none",
          duration: 1500,
        });
        return null;
      }
      if (
        openType === 1 &&
        selectOption.payAmount > useAmount &&
        payType.type === 2
      ) {
        uni.showToast({
          title: "积分不足",
          icon: "none",
          duration: 1500,
        });
        return null;
      }
      confirmPayment({
          openType,
          paymentType: openType === 1 ? payType.type : undefined,
          useAmount: useAmount,
          availableAmount: selectOption.integralCount || selectOption.payAmount,
          memberCardInfoId: selectOption.id,
          useInDate: useInDate,
        })
        .then(res => {
          openType === 2 &&
            this.setData({
              payTypeFlag: false
            }, () => {
              uni.navigateTo({
                url: `/subcontract/pages/memberInfo/memberInfo?cardId=${selectOption.id}`,
              });
            });
          if (openType === 1) {
            payType.type === 1 &&
              uni.requestPayment({
                timeStamp: res.wxResult.timeStamp,
                nonceStr: res.wxResult.nonceStr,
                package: res.wxResult.packageValue,
                signType: res.wxResult.signType,
                paySign: res.wxResult.paySign,
                success: () => {
                  this.setData({
                    payTypeFlag: false
                  }, () => {
                    uni.navigateTo({
                      url: `/subcontract/pages/memberInfo/memberInfo?cardId=${selectOption.id}`,
                    });
                  });
                  uni.showToast({
                    title: "支付成功",
                    icon: "success",
                    duration: 2000,
                  });
                },
                fail: e => {
                  const isCancel = msg => msg.includes("cancel");
                  if (!isCancel(e.errMsg)) {
                    uni.showToast({
                      title: "支付失败",
                      icon: "none",
                      duration: 2000,
                    });
                  }
                },
              });
            payType.type === 2 &&
              uni.navigateTo({
                url: `/subcontract/pages/memberInfo/memberInfo?cardId=${selectOption.id}`,
              });
          }
        })
        .catch(err => {
          uni.showToast({
            title: err,
            icon: "none",
            duration: 2000
          });
        });
      return null;
    }
    onPassMember() {
      const {
        phone,
        code
      } = this.userRegisterForm;
      const registerData = this.registerData;
      if (!phone || !code) {
        this.$global.alert({
          content: "请输入完整信息"
        });
        return null;
      }
      updateRegisterData({
          phone,
          code,
          registerData: registerData.join(","),
        })
        .then(() => {
          this.setData({
            openFlag: true,
            userInfoShow: false
          });
          uni.redirectTo({
            url: "/subcontract/pages/memberVip/memberVip",
          });
        })
        .catch(res => {
          this.$global.toast(res);
        });
      return null;
    }
    /**
     * 关闭弹窗
     */
    onClose() {
      this.setData({
        memShow: false,
        memDescFlag: false,
        payTypeFlag: false,
        openFlag: false,
        userInfoShow: false,
      });
    }

    onPrivilegeTap(e) {
      const index = e.target.dataset.index;
      this.setData({
        privilege: this.privilegeList[index],
        privilegeIndex: index,
      });
    }
    onShowMember() {
      this.setData({
        showMemberDrop: true,
      });
    }

    onShowPayType() {
      this.setData({
        showPayType: true,
      });
    }
    hideMemberDrop() {
      this.setData({
        showMemberDrop: false,
        showPayType: false,
      });
    }

    onMemberSelect(e) {
      const memberLevel = this.memberLevel;
      memberLevel.id = e.target.dataset.id;
      const selectOption: any =
        memberLevel.options.find(v => v.id === memberLevel.id) || {};
      this.setData({
        showMemberDrop: false,
        memberLevel,
        selectOption: selectOption,
      });
    }
    onPayTypeSelect(e) {
      const payType = this.payType;
      payType.type = e.target.dataset.type;
      const selectOption: any =
        payType.options.find(v => v.type === payType.type) || {};
      payType.text = selectOption.text;
      this.setData({
        showPayType: false,
        payType,
      });
    }

    // 号码校验
    validPhone(value, noTip ? ) {
      if (!value) {
        !noTip && this.$global.alert({
          content: "请输入电话号码"
        });
      } else if (!this.isvalidPhone(value)) {
        !noTip && this.$global.alert({
          content: "请输入正确的11位手机号码"
        });
      } else {
        return true;
      }
      return false;
    }
    // 判断是否为有效手机号
    isvalidPhone(str) {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
      return reg.test(str);
    }

    onPhoneBlur(e) {
      this.validPhone(e.detail.value);
    }

    onPhoneChange(e) {
      const userRegisterForm: any = this.userRegisterForm;
      userRegisterForm.phone = e.detail.value;
      this.setData({
        userRegisterForm
      });
    }
    onSendCode() {
      const phone = this.userRegisterForm.phone;
      let timer: any = null;
      if (this.validPhone(phone) || this.formCode.isDisabled) {
        const formCode = this.formCode;
        formCode.isDisabled = true;
        this.setData({
          formCode,
        });
        timer = setInterval(() => {
          formCode.time -= 1;
          formCode.buttonName = `${formCode.time}秒后重新发送`;
          if (formCode.time === 0) {
            formCode.buttonName = "重新发送";
            formCode.isDisabled = false;
            this.setData({
              formCode
            });
            clearInterval(timer);
          } else {
            this.setData({
              formCode
            });
          }
        }, 1000);
        sendCode({
          phone,
        });
      }
    }

    onCodeChange(e) {
      const userRegisterForm: any = this.userRegisterForm;
      userRegisterForm.code = e.detail.value;
      this.setData({
        userRegisterForm
      });
    }
    onRegisterChange(e) {
      const value = e.detail.value;
      const index = e.currentTarget.dataset.index;
      const registerData: any[] = this.registerData;
      registerData[index] = value;
      this.setData({
        registerData
      });
    }

    // 点击商品
    goodClick(e) {
      const id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: `/subcontract/pages/detail/detail?id=${id}`,
      });
    }
  }
</script>
<style lang="scss" scoped>
  @mixin middle-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .phoneAuthorize {
    position: fixed;
    width: 500rpx;
    height: 90rpx;
    background-color: #EAC67A;
    bottom: 450rpx;
    font-size: 32rpx;
    @include middle-center;
  }

  .phoneAnother {
    position: fixed;
    width: 500rpx;
    height: 90rpx;
    background-color: #3C3B43;
    bottom: 300rpx;
    font-size: 32rpx;
    border: 1rpx solid #EAC67A;
    color: #EAC67A;
    @include middle-center;
  }

  .pop {
    // height: 600rpx;
    height: 100%;
    font-size: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .pop__top {
    background-color: #EDEBEC;
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    color: #9C9C9C;
  }

  .pop__conter {
    margin-top: 40rpx;

    &--text {
      color: #9C9C9C;
      margin-left: 40rpx;
      margin-right: 40rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #F7F5F6;
    }

    &--phone {
      color: #9C9C9C;
      margin-left: 20rpx;
      margin-right: 20rpx;
      padding-bottom: 40rpx;
      padding-top: 40rpx;
      border-bottom: 1rpx solid #F7F5F6;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .pop__conter--phone--text {
    // width: 600rpx;
    display: flex;
    align-items: center;
  }

  .pop__conter--phone--code {
    width: 250rpx;
    height: 50rpx;
    border-radius: 25rpx;
    border: 2rpx solid #E0C286;
    color: #E0C286;
    font-size: 28rpx;
    display: flex;
    @include middle-center;
  }

  .pop__next {
    width: 500rpx;
    height: 80rpx;
    background-color: #DAB46B;
    color: white;
    border-radius: 40rpx;
    @include middle-center;
  }

  .topUser {
    background-color: #3E3D45;
    padding-top: 20rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #fff;

    &__left {
      display: flex;
      align-items: center;

      &--phone {
        margin-left: 20rpx;
      }
    }

    &__right {
      display: flex;
      align-items: center;
    }
  }


  .descConter {
    background-color: #FFF6E5;
    padding-bottom: 40rpx;
  }

  .descConter__top {
    padding-top: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    // background: linear-gradient(to right, #63583A, #AC941F);
    background-clip: text;
    color: transparent;
    display: flex;
    justify-content: center;

    &--icon {
      display: flex;
      justify-content: flex-end;
      margin-top: -40rpx;
      margin-right: 20rpx;
    }
  }

  .descConter__conter {
    margin-left: 40rpx;
    margin-top: 20rpx;
    font-size: 26rpx;
    margin-right: 40rpx;

    &__title {
      line-height: 35rpx;

      >text {
        display: inline-block;
        width: 35rpx;
        height: 35rpx;
        text-align: center;
        line-height: 35rpx;
        border-radius: 35rpx;
        background-color: rgba(235, 200, 98, 1);
      }
    }

    &_con {
      font-size: 24rpx;
      color: #666;
    }
  }

  .imageContainer_Wrap {
    width: 100%;
    height: 300rpx;
    margin-bottom: 100rpx;
    position: relative;
    background-color: #3E3D45;
  }

  .imageContainer {
    width: 100%;
    height: 400rpx;
    top: 14rpx;
    position: absolute;

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 50rpx;
      background-color: #fff;
      position: absolute;
      bottom: 0;
    }
  }

  .imageContainer__swiperItem {
    height: 350rpx;
  }

  .imageContainer__swiperItem__itemImg,
  .imageContainer__swiperItem__content {
    position: absolute;
    width: 100%;
    height: 230rpx;
    border-radius: 15rpx;
    z-index: 5;
    opacity: 0.7;
    top: 13%;
  }

  .imageContainer__swiperItem__itemImg--active,
  .imageContainer__swiperItem__content__active {
    opacity: 1;
    z-index: 10;
    height: 310rpx;
    top: 7%;
    transition: all .2s ease-in 0s;
  }

  .privilege {
    margin-top: 50rpx;
    padding: 20rpx;
  }

  .privilege__sign {
    width: 12rpx;
    height: 40rpx;
    background-color: #E1B56A;
    margin-right: 20rpx;
  }

  .privilege__conter {
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10rpx;
  }

  .privilege__conter--list {
    width: 25%;
    margin-bottom: 10rpx;
    margin-top: 10rpx;
    flex-wrap: wrap;
    font-size: 24rpx;
    display: flex;
    justify-content: center;

    .privilege__conter--list--item {
      width: 100rpx;
      height: 100rpx;
      // background-color: #FFFBF0;
      border-radius: 100%;
      @include middle-center;
    }
  }

  .privilege__desc {
    padding: 20rpx;
    margin: 20rpx;
    border: 1rpx solid #EFEFEF;
    font-size: 26rpx;
  }

  .opening {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 90rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: white;
    background: linear-gradient(to right, #EBCC89, #B4893B);
    @include middle-center;
  }

  .payConter {
    width: 600rpx;
    height: 720rpx;
    padding: 20rpx;
  }

  .payConter__top {
    font-size: 34rpx;
    display: flex;
    align-items: center;
  }

  .payConter__num {
    padding: 60rpx;
    font-size: 80rpx;
    @include middle-center;
  }

  .payConter__openingMode {
    font-size: 32rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    color: #666666;
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0;
  }

  .payConter__btn {
    margin-top: 80rpx;
    width: 450rpx;
    height: 80rpx;
    border-radius: 50rpx;
    background-color: #FE4E63;
    color: white;
    font-size: 30rpx;
    box-shadow: 0px 0px 40px #FEDBDF;
    @include middle-center;

    &-no {
      background-color: #aaa;
    }
  }

  .imageContainer__swiperItem__content {
    z-index: 100;
    padding: 40rpx 32rpx;
    color: #fff;
  }

  .good-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 24rpx;
  }

  .good-list-item {
    width: 49%;
    height: 500rpx;
    margin-bottom: 14rpx;
    position: relative;

    >image {
      width: 100%;
      background-color: #666;
      object-fit: cover;
    }
  }

  .custom__drop--down {
    position: absolute;
    width: 200rpx;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    padding: 20rpx;
    z-index: 1000;
    right: 0;
  }

  .member-item {
    margin: 15rpx 0;

    &-active {
      color: #E1B56A;
    }
  }

  .popup-wrap {
    .van-popup--bottom.van-popup--safe {
      height: 100%;
    }
  }

  .privilege-img {
    width: 50rpx;
    height: 50rpx;

    &-active {
      width: 60rpx;
      height: 60rpx;
    }
  }

  .imageContainer__swiperItem__paymount {
    // box-shadow: -2px 2px 2px #888888;
    font-size: 30rpx;
    position: absolute;
    bottom: 40rpx;
    left: 32rpx;
    padding: 12rpx 36rpx;
    border-radius: 80rpx;
    background-color: #fff;
    color: #666;
    // background: linear-gradient(to right, rgb(202,191,212), rgb(138, 142,145));
  }

  .can__use {
    position: absolute;
    font-size: 24rpx;
    color: #999;
  }

  .phone__code--none {
    border: 1rpx solid #B7B7B7;
  }

  .good-list-item-name {
    font-size: 32rpx;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pop__conter--phone-label {
    white-space: nowrap;

    text {
      color: red;
    }
  }

  .topBack__member {
    // width: 90%;
    // margin-left: 5%;
    width: 400rpx;
    height: 200rpx;
    border-radius: 15rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 20rpx;
    background-size: 100% 100%;
    color: white;
    font-size: 30rpx;
    margin: 0 100rpx;
  }

  .topBack__member-level {
    margin-top: 18rpx;
    padding: 6rpx 12rpx;
    background-color: #fff;
    font-size: 26rpx;
    color: #aaa;
    border-radius: 50rpx;
    display: inline-block;
  }

  .topBack__member-renew {
    float: right;
    padding: 10rpx 30rpx;
    border-radius: 50rpx;
    background: linear-gradient(to right, rgb(202, 191, 212), rgb(138, 142, 145));
  }

  .topBack__member-empty {
    float: right;
    padding: 10rpx 30rpx;
    height: 60rpx;
  }

  .topBack__member-time {
    float: left;
    font-size: 24rpx;

    text {
      display: block;
    }
  }
</style>